import React, { Component } from 'react';
import { Avatar, NavBar, Space, Popover, Toast, List, Grid } from 'antd-mobile'
import { SetOutline, PayCircleOutline, UnorderedListOutline, SearchOutline, MoreOutline, CloseOutline, EyeFill, ContentOutline, AppstoreOutline, HeartOutline, UserOutline } from 'antd-mobile-icons'
import { Action } from 'antd-mobile/es/components/popover'
import request from "../../api"

import "./address.css"

const actions: Action[] = [
    { key: 'scan', icon: <ContentOutline />, text: '首页' },
    { key: 'payment', icon: <AppstoreOutline />, text: '分类搜索' },
    { key: 'bus', icon: <HeartOutline />, text: '购物车' },
    { key: 'assistant', icon: <UserOutline />, text: '我的京东' },
    { key: 'browse', icon: <EyeFill />, text: '浏览记录' },
]
const right = (
    <div style={{ fontSize: 24 }}>
        <Space style={{ '--gap': '16px' }}>
            <Popover.Menu
                mode='dark'
                actions={actions}
                placement='bottom-start'
                onAction={node => Toast.show(`选择了 ${node.text}`)}
                trigger='click'
            >
                <MoreOutline />
            </Popover.Menu>
        </Space>
    </div>
)

interface Props {
    history: any,
    location: any,
    match: any
}
interface State {
    addresslist: AddItem[]
}
interface AddItem {
    nickname: string,
    avatar: string,
}
class Address extends Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
            addresslist: []
        }
    }
    componentDidMount(): void {
        var token = localStorage.getItem("token")
        var userid = localStorage.getItem("userid")
        if (token != null && userid != null) {
            request.user.user_info({ userid: userid }).then((ok) => {
                this.setState({ addresslist: ok.data.data }, () => {
                    console.log(this.state.addresslist);


                })


            })
        }
    }

    back() {
        this.props.history.go(-1);

    }
    tuichu(){
        localStorage.removeItem("userid")
        localStorage.removeItem("token")
        this.props.history.push("/")
    }
    handleClick() {
        console.log("点击了");

    }
    render() {
        return (
            <div className='address'>
                <NavBar right={right} style={{ "--border-bottom": "solid 1px #eee","background":"#fff" }} onBack={()=>{this.back()}}> <span className='top_test'>账户设置</span></NavBar>
                <div className="address_two">
                    <p className='zhanghua_text'>管理我的账户</p>

                    {
                        this.state.addresslist.map((item, index) => {
                            return (
                                <div className='zhanghu' key={index}>
                                    <List key={index} className="center_top" style={{ "--border-bottom": "0", "--border-top": "0", "--padding-left": "0" }}>
                                        <List.Item
                                            prefix={<Avatar src="https://img0.baidu.com/it/u=859596607,306107302&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313" style={{ '--size': '88px' }} />}
                                            description='嗨购移动端首页页面'
                                        >
                                            昵称:{item.nickname}
                                        </List.Item>

                                    </List>
                                    <p className='address_right_top'>当前登陆</p>
                                </div>
                            )
                        })
                    }
                </div>
                <div className='dizhi'>
                    <List >
                        <List.Item onClick={() => { }} extra='管理我的地址'>
                            <span>收货地址管理</span>
                        </List.Item>
                        <List.Item extra='密码/实名认证等管理' onClick={this.handleClick}>
                            <span> 账户与安全</span>
                        </List.Item>
                        <List.Item extra='去设置' onClick={this.handleClick}>
                            <span>京东支付密码</span>
                        </List.Item>
                        <List.Item onClick={this.handleClick}><span>隐私设置</span> </List.Item>
                    </List>

                </div>
                <div className='grid'>
                    <Grid columns={3} gap={0}>
                        <Grid.Item>
                            <div className={'grid-demo-item-block'}> <span>意见反馈</span></div>
                        </Grid.Item>
                        <Grid.Item>
                            <div className={'grid-demo-item-block'}> <span>嗨购客户端</span></div>
                        </Grid.Item>
                        <Grid.Item>
                            <div className={'grid-demo-item-block'}> <span onClick={()=>{this.tuichu()}}>退出登陆</span></div>
                        </Grid.Item>

                    </Grid>
                </div>
            </div>
        );
    }
}

export default Address;